<template>
  <div class="exBox">
    <div class="exBox">
      <img class="ggImg" :src="ImgUrl" alt="" />
      <div class="ptTopBox b-b-1">
        <div class="ptTopImgBox flex"><img class="c-xx" src=""  alt="品牌标志" /></div>
        <div class="ptTopH1">品牌名字品牌名字</div>
        <div class="ptTopFrom">来自英国</div>
      </div>
      <div class="ptTextBox" @click="setPtTextFalh()">
        <p class="ptText" :class="{ ptTextOn: ptTextFalg }">{{ ptText }}</p>
        <div class="ptTextImgBox flex">
          <img
            class="ptTextImg"
            :src="ptTextImg"
            alt=""
            :class="{ ptTextImgOn: ptTextImgFalh }"
          />
        </div>
      </div>
      <div class="hr1"></div>
      <div>
        <div class="ptListH flex b-b-1">全部商品</div>
      !-- 商品 -->
      <div class="c-shop">
       <img class="c-cunc1" src="../../assets/user/chuncai.png" alt="">
            <span class="c-biaoti">焕彩萃璨花蕊唇彩4.8g</span>
            <span class="c-jieshao">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span>
           <span class="c-hwzy">
              <img class="c-rb" src="../../assets/user/riben.png" alt="">
              <img class="c-fj" src="../../assets/user/feiji.png" alt="">
              海外直邮 <span class="c-hyzy-qian">¥166.06</span></span>
          
      </div>
       <div class="c-shop">
        
       <img class="c-cunc2" src="../../assets/user/chuncai.png" alt="">
            <span class="c-biaoti">焕彩萃璨花蕊唇彩4.8g</span>
            <span class="c-jieshao">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span>
           <span class="c-hwzy">
              <img class="c-rb" src="../../assets/user/riben.png" alt="">
              <img class="c-fj" src="../../assets/user/feiji.png" alt="">
              海外直邮 <span class="c-hyzy-qian">¥166.06</span></span>
          
      </div>
       <div class="c-shop">
        
       <img class="c-cunc3" src="../../assets/user/chuncai.png" alt="">
            <span class="c-biaoti">焕彩萃璨花蕊唇彩4.8g</span>
            <span class="c-jieshao">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span>
           <span class="c-hwzy">
              <img class="c-rb" src="../../assets/user/riben.png" alt="">
              <img class="c-fj" src="../../assets/user/feiji.png" alt="">
              海外直邮 <span class="c-hyzy-qian">¥166.06</span></span>
      </div>
       <div class="c-shop">
        
       <img class="c-cunc4" src="../../assets/user/chuncai.png" alt="">
            <span class="c-biaoti">焕彩萃璨花蕊唇彩4.8g</span>
            <span class="c-jieshao">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span>
           <span class="c-hwzy">
              <img class="c-rb" src="../../assets/user/riben.png" alt="">
              <img class="c-fj" src="../../assets/user/feiji.png" alt="">
              海外直邮 <span class="c-hyzy-qian">¥166.06</span></span>
      </div>
    
  




        <div class="addTopSx flex">加载更多</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Index",
  data() {
    return {
      ImgUrl: require("../../assets/user/轮播图.png"),
      ptTextFalg: true,
      ptTextImgFalh: false,
      ptText:
        "品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介",
      ptTextImg: require("../../assets/user/下箭头.png"),
    };
  },
  methods: {
    setPtTextFalh() {
      this.ptTextFalg = !this.ptTextFalg;
      this.ptTextImgFalh = !this.ptTextImgFalh;
    },
  },
  components: {
  },
};
</script>

<style scoped>
* {
  font-size: 0;
}
.exBox {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 999;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spMsBox {
  margin: 0 2rem;
}
.f30c3 {
  font-size: 3rem;
  color: #333333;
}
.f30c4c {
  font-size: 3rem;
  color: #4c4c4c;
}
.hf30 {
  height: 3rem;
  line-height: 3rem;
}
.f24c4c {
  font-size: 2.4rem;
  color: #4c4c4c;
}
.b-b-1 {
  border-bottom: 0.1rem solid #cccccc;
}
</style>

<style scoped>
.ggImg {
  display: block;
  width: 100%;
}
.ptTopBox {
  width: calc(100% - 4rem);
  height: 9.8rem;
  padding: 0 2rem;
  position: relative;
}
.ptTopImgBox {
  width: 9.8rem;
  height: 9.8rem;
  background-color: #fff;
  border: 0.1rem solid #cccccc;
  position: absolute;
  top: -2.2rem;
  left: 2rem;
}
.ptTopH1 {
  font-size: 2.8rem;
  color: #333333;
  position: absolute;
  top: 2rem;
  left: 14rem;
}
.ptTopFrom {
  font-size: 2rem;
  color: #4c4c4c;
  position: absolute;
  top: 5.3rem;
  left: 14rem;
}
.ptTextBox {
  padding: 1.1rem 2rem 0 2rem;
}
.ptText {
  max-height: 999999999rem;
  line-height: 2.4rem;
  font-size: 1.8rem;
  color: #4c4c4c;
}
.ptTextOn {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ptTextImgBox {
  height:3.6rem;
}
.ptTextImgOn {
  transform: rotate(180deg);
}
.hr1 {
  height: 2rem;
  background-color: #f2f2f2;
}
.ptListH {
  height: 9rem;
  padding: 0 2rem;
  font-size: 3rem;
  color: #333333;
  justify-content: flex-start;
}
.addTopSx {
  width: 100%;
  height: 14.9rem;
  line-height: 7.3rem;
  font-size: 2.4rem;
  color: #808080;
  text-align: center;
  background-color: #f2f2f2;
}
/* 商品 */
.c-shop{
  height: 20rem;
  width: 100%;
  background-color: #fff;
  border-bottom: 0.1rem #cccccc solid;
  margin-bottom:1.9rem;
}
.c-cunc1{
width: 6.9rem;
height: 15.3rem;
/* border: 1px #f00 solid; */
position: absolute;
top: 66.7rem;
left: 7.6rem;
}
.c-cunc2{
width: 6.9rem;
height: 15.3rem;
/* border: 1px #f00 solid; */
position: absolute;
top: 88rem;
left: 7.6rem;
}
.c-cunc3{
width: 6.9rem;
height: 15.3rem;
/* border: 1px #f00 solid; */
position: absolute;
top: 110rem;
left: 7.6rem;
}
.c-cunc4{
width: 6.9rem;
height: 15.3rem;
/* border: 1px #f00 solid; */
position: absolute;
top: 132rem;
left: 7.6rem;
}
.c-biaoti{
display: block;
font-size: 3rem;
color:#333333;
margin-left:22rem;
padding-top:2rem;
/* border: 0.1rem #f00 solid; */
}
.c-jieshao{
display: block;
font-size: 2.4rem;
height: 5.9rem;
line-height: 3.5rem;
color:#4d4d4d;
margin-left:22rem;
padding-top:1rem ;
/* border: 0.1rem #f00 solid; */
}
.c-rb{
width: 3rem;
height: 2rem;
margin-left:22rem;
}
.c-fj{
width: 3.4rem;
height: 3.3rem;
padding-left:1.9rem; 
padding-right: 0.8rem;
vertical-align: middle;
}
.c-hwzy{
  display: inline-block;
  font-size: 2.4rem;
  height: 2.4rem;
  vertical-align: middle;
  color: #333333;
  margin-top:1.4rem ;
  
}
.c-hyzy-qian{
  vertical-align: middle;
  color: #e53e42;
  font-size: 3rem;
  margin-left:17rem ;
}

</style>
